<template>
    <div>
        <div class="form-item form-item-style1">
            <div class="label-title">
                <label>活动名称</label>
            </div>
            <div>
                <p>{{detailData.ActivityName}}</p>
            </div>
        </div>
        <div class="form-item form-item-style1">
            <div class="label-title">
                <label>活动时间</label>
            </div>
            <div>
                <p>{{detailData.ActivityTime}}</p>
            </div>
        </div>
        <div class="form-item form-item-style1">
            <div class="label-title">
                <label>活动地点</label>
            </div>
            <div>
                <p>{{detailData.ActivityPlace}}</p>
            </div>
        </div>
        <div class="form-item form-item-style1">
            <div class="label-title">
                <label>活动人数（人）</label>
            </div>
            <div>
                <p>{{detailData.ActivityNumber}}</p>
            </div>
        </div>
        <div class="form-item form-item-style2">
            <div class="label-title">
                <label>参加单位</label>
            </div>
            <div>
                <p class="textarea">{{detailData.ParticipatingUnit}}</p>
            </div>
        </div>
        <div class="form-item form-item-style1">
            <div class="label-title">
                <label>投入经费</label>
            </div>
            <div>
                <p>{{detailData.Investment}}</p>
            </div>
        </div>
        <div class="form-item form-item-style2">
            <div class="label-title">
                <label>活动内容</label>
            </div>
            <div>
                <p class="textarea">{{detailData.ActivityContent}}</p>
            </div>
        </div>
        <div class="form-item form-item-style2">
            <div class="label-title">
                <label>备注</label>
            </div>
            <div>
                <p class="textarea">{{detailData.remark}}</p>
            </div>
        </div>
        <div class="form-item form-item-style2">
            <div class="label-title">
                <label>图片</label>
            </div>
            <div class="upload-wrap">
                <upload v-if="detailData.FileName.length>0"
                        :imgList="detailData.FileName"></upload>
                <strong v-else
                        class="no-img">暂无图片</strong>
            </div>
        </div>
        <div class="form-item form-item-style1">
            <div class="label-title">
                <label>点赞人数</label>
            </div>
            <div>
                <p>{{detailData.GiveThumbsup}}</p>
            </div>
        </div>
        <!-- <div class="video-play"
             v-if="showVideo">
            <div class="video-content">
                <video src="../../../../static/1.mp4"
                       autoplay="autoplay"
                       controls
                       muted
                       loop="loop"
                       width="300"
                       height="300px"></video>
                <span class="close"
                      @click="showVideo = false"></span>
            </div>
        </div> -->
        <myMenu></myMenu>
    </div>
</template>
<script>
import myMenu from '@/commonComponents/menu'
import upload from '@/commonComponents/upload/index'
export default {
    name: 'safetyDetail',
    data () {
        return {
            detailData: {
            },
            videoImg: '',
            showVideo: true
        }
    },
    components: {
        upload,
        myMenu
    },
    created () {
        this.detailData = JSON.parse(this.$route.query.detail)

        let video = document.createElement('video')
        video.src = '../../../../static/1.mp4'
        video.currentTime = 1
        video.className = 'video-list'
        video.style.display = 'none'
        document.body.appendChild(video)
    },
    mounted () {
        let videos = document.getElementsByClassName('video-list')
        videos = Array.prototype.slice.call(videos)
        videos.forEach(video => {
            video.addEventListener('loadeddata', () => {
                let canvas = document.createElement('canvas')
                canvas.width = video.videoWidth * 0.3
                canvas.height = video.videoHeight * 0.3
                canvas.getContext('2d')
                    .drawImage(video, 0, 0, canvas.width, canvas.height)
                var img = document.createElement('img')
                img.src = canvas.toDataURL()
                this.videoImg = canvas.toDataURL()
            })
        })
    }
}
</script>
<style scoped>
.upload-wrap video {
    width: 56px;
    height: 56px;
}
.upload-wrap .video-img {
    padding-top: 0;
}
.video-img {
    position: relative;
    width: 56px;
    height: 56px;
}
.video-img span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 20px;
    height: 20px;
    background: url(../../../assets/play.png) no-repeat center;
    background-size: contain;
}
.video-img img {
    width: 100%;
    height: 100%;
}
.video-play {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.2);
}
.video-play .video-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 300px;
    height: 300px;
    background: #000;
}
.video-play .close {
    position: absolute;
    right: -10px;
    top: -10px;
    background: url(../../../assets/close.png) no-repeat;
    background-size: contain;
    width: 20px;
    height: 20px;
    border-radius: 50%;
}
</style>
